<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mvvm详解</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <!---
  MVVM模型:
     1.M:模型（model） 对应data里面的数据 
     2.V:视图（view）：DOM页面 代码
     3.vm:(view model):Vue实例对象：里面的data Bindings把数据放到页面，里面的DOMListers:页面的改变返回数据，双向绑定
-->


    <!--v:view部分-->
    <div id="root">
        <div>{{name}}</div>

        <!--vue身上所有的属性，及Vue原型上的所有属性，在视图（view）模板中都可以直接使用-->
        <div>{{$options}}</div>
        <div>{{_update}}</div>

    </div>

    <script>
        //vm:(viewmodel)部分
        const vm = new Vue({
            el: '#root',
            // M:模型（model）部分
            data() {
                return {

                    name: "邓紫棋"
                }
            }
        });
        console.log(vm)

        //总结:data中所有的属性，最后都出现在了vue 实例身上
        //vue实例身上所有的属性，及Vue原型上的所有属性，在视图（view）模板中都可以直接使用
        //Vue先将data中的数据放到viewmodel中，插值表达式里直接调用的是viewdemo中的数据
    </script>












</body>

</html>